<template>
    <div class="deil_mo" v-if="list_itemData">
        <div class="mo-l">
            <span class="n_l">组件名称：</span>
            <el-input v-model="list_itemData.name" @input="changeParent" class="page_num"></el-input>
        </div>
        <div class="mo-l" v-if="list_type == '编码组件'">
            <span class="n_l">编码类型：</span>
            <el-select class="select_coder" v-model="list_itemData.codeType" filterable clearable @change="changeCodeType">
                <el-option style="text-align: center;" :value="1" label="二维码" />
                <el-option style="text-align: center;" :value="2" label="一维码" />
            </el-select>
        </div>
        <div class="mo-l" v-if="list_type == '编码组件'">
            <span class="n_l">调用数据：</span>
            <template v-for="it in list_itemData.dataTypeVos">
                <el-select v-model="it.category" class="select_coder" filterable clearable @change="changeParent">
                    <template v-for="(item, index) in category">
                        <el-option style="text-align: center;" :key="index" :value="index + 1" :label="item"
                            v-if="!(list_itemData.codeType == 2 && (index + 1 == 4 || index + 1 == 5))" />
                    </template>
                </el-select>
            </template>
        </div>
        <template v-for="it in list_itemData.dataTypeVos">
            <div class="mo-l" v-if="list_type == '编码组件' && it.category == 1">
                <span class="n_l">调用数据：</span>
                <el-input type="textarea" v-model="it.val" class="select_coder" @input="changeParent" />
            </div>
        </template>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <div class="sel_data">
                <div class="btn_add">
                    <span class="n_l">调用数据：</span>
                    <div class="n_r"><el-icon color="#007cff" @click="addData" class="plus_add">
                            <CirclePlusFilled />
                        </el-icon><span class="n_l">添加</span>
                    </div>
                </div>
                <div class="module_add">
                    <div v-for="(item, index) in list_itemData.dataTypeVos" class="big_card">
                        <div class="list_li" @click.stop="editUse(index)">
                            <div class="ordi_li">
                                <span>{{ index + 1 }}</span>
                                <div>{{ category2[item.category - 1] }}</div>
                            </div>
                            <div class="btn_li">
                                <i class="material-icons">menu</i>
                                <i class="material-icons" @click.stop="delUse(index)">close</i>
                            </div>

                        </div>
                        <el-select v-model="item.category" class="select_coder" filterable clearable v-if="item.isShow"
                            @change="changeParent">
                            <template v-for="(item, index) in category2">
                                <el-option style="text-align: center;" :value="index + 1" :label="item" />
                            </template>
                        </el-select>
                        <el-input v-if="item.category == 2 && item.isShow" type="textarea" v-model="item.val"
                            class="select_coder" @input="changeParent" />
                    </div>

                </div>
            </div>
        </div>
        <div class="mo-l">
            <span class="n_l">锁定比例：</span>
            <el-checkbox v-model="list_itemData.lockScale" size="large" @change="changeScale" />
        </div>
        <div class="mo-l">
            <span class="n_l">宽度：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.width" show-input :show-input-controls="false" @input="changeWidth"
                    :max="Math.round(headerForm.width * mm_px) + 1" />
            </div>
        </div>
        <div class="mo-l" v-show="!list_itemData.lockScale">
            <span class="n_l">高度：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.height" show-input :show-input-controls="false" @input="changeHeight"
                    :max="Math.round(headerForm.height * mm_px) + 1" />
            </div>
        </div>

        <div class="mo-l">
            <span class="n_l">坐标X：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.coordinateX" show-input :show-input-controls="false" :min="0"
                    :max="Math.round(Math.round(headerForm.width * mm_px) + 1 - list_itemData.width)"
                    @input="changeParent" />
            </div>
            <div>
            </div>
        </div>
        <div class="mo-l">
            <span class="n_l">坐标Y：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.coordinateY" show-input :show-input-controls="false" :min="0"
                    :max="Math.round(headerForm.height * mm_px + 1 - list_itemData.height)" @input="changeParent" />
            </div>
        </div>
        <div class="mo-l">
            <span class="n_l">旋转角度：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.rotateAngle" show-input :min="0" :max="360" :show-input-controls="false"
                    @input="changeParent" />
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">文本字体：</span>
            <el-select v-model="list_itemData.textFont" class="select_coder" filterable clearable @change="changeParent">
                <template v-for="(item, index) in textFont">
                    <el-option style="text-align: center;" :value="index + 1" :label="item" />
                </template>
            </el-select>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">文本字号：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.textWordSize" show-input :show-input-controls="false"
                    @input="changeParent" />
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">文本行高：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.textRowHeight" show-input :show-input-controls="false"
                    @input="changeParent" />
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">首行缩进：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.textIndent" show-input :show-input-controls="false"
                    @input="changeParent" />
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">文本间距：</span>
            <div class="slider-demo-block">
                <el-slider v-model="list_itemData.textSpacing" show-input :show-input-controls="false"
                    @input="changeParent" />
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <div class="text">
                <i :class="`material-icons ${list_itemData.textAlign == index + 1 ? 'activeFont' : ''}`"
                    v-for="(item, index) in tt" @click="formatAlign(index + 1)">{{ item }}</i>
                <i :class="`material-icons ${list_itemData.textBold ? 'activeFont' : ''}`"
                    @click="addFormat('bold')">format_bold</i>
                <i :class="`material-icons ${list_itemData.textIncline ? 'activeFont' : ''}`"
                    @click="addFormat('italic')">format_italic</i>
                <i :class="`material-icons ${list_itemData.textUnderline ? 'activeFont' : ''}`"
                    @click="addFormat('underlined')">format_underlined</i>
            </div>
        </div>
        <div class="mo-l" v-if="list_type == '文本组件'">
            <span class="n_l">文本颜色：</span>
            <el-color-picker v-model="list_itemData.textColor" :predefine="predefineColors" @change="changeParent" />
        </div>

        <div class="mo-l" v-show="list_itemData.codeType == 1 && list_type == '编码组件'">
            <span class="n_l">美化图片：</span>
            <el-upload class="img-uploader" :show-file-list="false" :on-change="handleChange" :auto-upload="false">
                <div v-if="list_itemData.image" class="dele_img">
                    <el-image fit="scale-down" :src="list_itemData.image" class="imgUrl" />
                </div>
                <el-icon v-else class="img-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            <div class="delete_btn" v-if="list_itemData.image" @click.self="deleteE">清除</div>
        </div>
        <div class="mo-l" v-if="list_type == '图片组件'">
            <span class="n_l">上传图片：</span>
            <el-upload class="img-uploader" :show-file-list="false" :on-change="handleChange" :auto-upload="false">
                <div v-if="list_itemData.image" class="dele_img">
                    <el-image fit="scale-down" :src="list_itemData.image" class="imgUrl" />
                </div>
                <el-icon v-else class="img-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            <div class="delete_btn" v-if="list_itemData.image" @click.stop="deleteE">清除</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, toRefs, watch, onMounted } from "vue";
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadFile } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useCodeState } from "../../../../store/modules/code";
import JsBarcode from 'jsbarcode'
const codeStore = useCodeState();
const { headerForm, imgListDelete } = storeToRefs(codeStore);
const category = ref(['固定值', '防伪编码', '仓储编码', '防伪链接','产品展示链接'])// 类型：1-固定值，2-防伪编码，3-仓储编码，4-防伪链接，5-产品展示链接；（注：当codeType=1时，4、5才显示）
const category2 = ref(['序号', '固定值', '防伪编码', '仓储编码', '品牌名称', '产品名称', '产品型号', '产品分类', '产品规格', '产品生产日期', '编码注册日期', '编码质保周期'])
const textFont = ref(['微软雅黑', '黑体', '宋体', '楷体', '隶书', '幼圆', '仿宋'])
const tt = ref(['format_align_left', 'format_align_center', 'format_align_right'])
const list_itemData = ref(null)
const formatAlign = (i) => {
    list_itemData.value.textAlign = i
    emit('set-parent', list_itemData.value)
}
const addFormat = (i) => {
    if (i == 'bold') {
        list_itemData.value.textBold = !list_itemData.value.textBold
    }
    if (i == 'italic') {
        list_itemData.value.textIncline = !list_itemData.value.textIncline
    }

    if (i == 'underlined') {
        list_itemData.value.textUnderline = !list_itemData.value.textUnderline
    }
    emit('set-parent', list_itemData.value)
}
const predefineColors = ref([
    '#000000',
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577'
])
const deleteE = () => {
    if (list_itemData.value.id || list_itemData.value.image.length > 0) {
        imgListDelete.value.push(list_itemData.value.image)
    }
    list_itemData.value.image = ''
    list_itemData.value.tmpImg = ''
    emit('set-parent', list_itemData.value)
}
const props = defineProps({
    //子组件接收父组件传递过来的值
    list_type: String,
    list_item: Object,
    mm_px: Number
})
//使用父组件传递过来的值
const { list_type, list_item, mm_px } = toRefs(props)
const addData = () => {
    list_itemData.value.dataTypeVos.push({
        category: 2,
        val: '文本',
        isShow: false
    })
    emit('set-parent', list_itemData.value)
}
let options2 = {
    displayValue: false,
    fontSize: 10,
    height: 30,//整个条形码的宽度
    width: 1,
    textMargin: 1,
    margin: 0,
};
const changeCodeType = (val) => {
    if (val == 2) {
        setTimeout(() => {
            JsBarcode('#barcode', String("Hello world!"), options2)
        }, 50)
    }
    emit('set-parent', list_itemData.value)
}
const editUse = (index) => {
    list_itemData.value.dataTypeVos[index].isShow = !list_itemData.value.dataTypeVos[index].isShow
    emit('set-parent', list_itemData.value)
}
const delUse = (index) => {
    list_itemData.value.dataTypeVos.splice(index, 1)
    emit('set-parent', list_itemData.value)
}
// 比例是否锁定
const changeScale = (val) => {
    if (val) {
        list_itemData.value.scaleSize = list_itemData.value.width / list_itemData.value.height
    }
    emit('set-parent', list_itemData.value)
}
const changeWidth = (val) => {
    if (list_itemData.value.lockScale) {
        if (list_itemData.value.height > Math.round(headerForm.value.height * mm_px.value)+1) {
            list_itemData.value.height = Math.round(headerForm.value.height * mm_px.value)+1
            list_itemData.value.scaleSize = list_itemData.value.width /list_itemData.value.height     
            emit('set-parent', list_itemData.value)
            return
        } 
        if (list_itemData.value.width / list_itemData.value.scaleSize>Math.round(headerForm.value.height * mm_px.value)+1) {
            list_itemData.value.height = Math.round(headerForm.value.height * mm_px.value)+1
            list_itemData.value.scaleSize = list_itemData.value.width /list_itemData.value.height   
            return
        }
        list_itemData.value.height = list_itemData.value.width / list_itemData.value.scaleSize
    }
    emit('set-parent', list_itemData.value)
}
const changeHeight = (val) => {
    emit('set-parent', list_itemData.value)
}
const emit = defineEmits(['set-parent'])
const handleChange: UploadProps["onChange"] = (uploadFile: UploadFile) => {
    list_itemData.value.image = URL.createObjectURL(uploadFile.raw!)
    list_itemData.value.tmpImg = uploadFile
    emit('set-parent', list_itemData.value)
}
onMounted(() => {
    list_itemData.value = list_item.value
})
const changeParent = () => {
    emit('set-parent', list_itemData.value)
}
</script>
<style scoped lang="scss">
@import './blank.scss';
</style>